<template>
  <div class="login-container">
    <div class="login-content">
      <h2>登 录</h2>
      <el-form label-position="right" :model="formLogin">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="formLogin.user"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="formLogin.pwd" type="password" @keyup.enter.native="login"></el-input>
        </el-form-item>
        <el-button @click="login" size="medium" type="primary" :loading="isLoading" style="width:100%">登 录</el-button>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formLogin: {},
      isLoading: false
    };
  },
  methods: {
    login() {
      let _self = this;
      _self.isLoading = true;
      setTimeout(() => {
        _self.$store
          .dispatch("LogIn", _self.formLogin)
          .then(() => {
            _self.loading = false;
            _self.$router.replace("/");
          })
          .catch(() => {
            _self.loading = false;
          });
      }, 1000);
    }
  }
};
</script>
<style lang="less">
.login-container {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #2d3a4b;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #eee;
  text-align: center;
  h2 {
    font-weight: 400;
  }
  .login-content {
    width: 520px;
    .el-form-item__label {
      color: #eee;
    }
    .el-input {
      .el-input__inner {
        border-color: hsla(0, 0%, 100%, 0.15);
        background-color: #2d3a4b;
        color: #eee;
        height: 40px;
      }
    }
  }
}
</style>
